<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessageBox } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'

const router = useRouter()
const store = useStore()
const current_page = ref('首页')
const pageInfo = ref([])
const userInfo = ref(store.getters.getUser)
console.log(userInfo)
console.log("666666666666666666666666")

// 在组件挂载时初始化导航菜单
onMounted(() => {
  // 添加默认值和错误处理
  const userRole = localStorage.getItem('userRole')
  if (!userRole) {
    // 如果没有用户角色信息，重定向到登录页
    router.push('/login')
    return
  }

  let baseMenus = []

  switch(userRole.toLowerCase()) {
    case 'root':
      baseMenus = [
        { name: '用户管理', path: '/root' },
        { name: '基础数据管理', path: '/root/base-data' }
      ]
      break

    case 'admin':
      baseMenus = [
        { name: '管理控制台', path: '/admin' },
        { name: '活动中心', path: '/admin/data' },
        { name: '教师中心', path: '/admin/teacher' },
        { name: '教学班中心', path: '/admin/class' },
        { name: '学员中心', path: '/admin/student' }
      ]
      break

    case 'teacher':
      baseMenus = [
        { name: '教师首页', path: '/teacher' },
        { name: '我的课程', path: '/teacher/course' },
        { name: '点名管理', path: '/teacher/attendance' },
        { name: '我的教学班', path: '/teacher/class' },
        { name: '我的教学单元', path: '/teacher/teaching' },
      ]
      break

    case 'student':
      baseMenus = [
        { name: '学习首页', path: '/student' },
        { name: '我的课程', path: '/student/course' },
        { name: '我要签到', path: '/student/call' },
        { name: '我的班级', path: '/student/class' }
      ]
      break

    default:
      router.push('/login')
      return
  }

  pageInfo.value = baseMenus
})

function handleMenuSelect(index) {
  current_page.value = pageInfo.value.find((item) => item.path === index).name
  router.push(index)
}

async function handleExit() {
  await ElMessageBox.confirm('确认退出系统吗?', '退出提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  store.commit('REMOVE_INFO')
  router.push('/login')
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="left">
          <img src="../assets/logo.png" alt="logo" />
          <div class="left_content">
            <span>学习营活动管理平台</span>
            <span>让学营启航，让梦想飞扬</span>
          </div>
        </div>
        <div class="right">
          <a v-for="item in pageInfo"
             :key="item.path"
             href="javascript:void(0)"
             @click="handleMenuSelect(item.path)">
            {{ item.name }}
          </a>
          <a href="javascript:void(0)" @click="handleExit">退出</a>
        </div>
      </el-header>

      <div class="current_page">
        <span>当前位置 > </span><span>{{ current_page }}</span>
      </div>

      <el-container>
        <el-aside width="200px" class="aside">
          <div class="info">
            <div class="info_avator">
              <el-avatar :icon="UserFilled" />
            </div>
            <div class="info_details">
              <span>{{userInfo.username }}</span>
              <span>{{ userInfo.role }}</span>
            </div>
          </div>

          <div class="menus">

            <div class="menu-item">
              <div>个人资料</div>
              <div>
              真实姓名
              <span>{{userInfo.realName }}</span>
            </div>
              <div>
                性别
                <span :style="{ color: userInfo.sex === 1 ? '#409EFF' : '#F56C6C' }">
    {{ userInfo.sex === 1 ? '男' : '女' }}
  </span>
              </div>
              <div>
                电话号码
                <span>{{userInfo.phone }}</span>
              </div>
              <div>
                出生日期
                <span>{{userInfo.birthday }}</span>
              </div>
              <div>
                邮箱
                <span>{{userInfo.email }}</span>
              </div>
              <div>
                账号状态
                <el-tag :type="userInfo.status === 1 ? 'success' : 'danger'" size="small">
                  {{ userInfo.status === 1 ? '正常' : '异常' }}
                </el-tag>
              </div>


            </div>
          </div>
        </el-aside>

        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
}

.header {
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #ffffff;

  .left {
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      height: 100%;
    }

    .left_content {
      display: flex;
      flex-direction: column;

      span:nth-child(1) {
        margin-left: 3vh;
        font-size: x-large;
        font-weight: bold;
        font-family: 'Brush Script MT', cursive;
        color: #14a0e7;
      }

      span:nth-child(2) {
        margin-left: 3vh;
        font-size: large;
        font-family: 'STXingkai', cursive;
      }
    }
  }

  .right {
    height: 100%;
    width: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    a {
      color: #14a0e7;
      text-decoration: none;
      font-weight: bold;
    }

    a:hover,
    a:focus {
      color: #14a0e7;
      text-decoration: none;
    }
  }
}

.aside {
  margin-left: 3vh;
  height: calc(100vh - 61vh);

  .info {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    margin-bottom: 1vh;

    .info_avator {
      height: 100%;
      width: 20%;
    }

    .info_details {
      height: 100%;
      width: calc(100% - 20%);
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin-left: 1vh;
      padding-left: 5px;

      span:nth-child(1) {
        font-size: large;
      }

      span:nth-child(2) {
        font-size: small;
        color: rgb(99, 119, 55);
      }
    }
  }
}

.main {
  margin-left: 1vh;
  height: calc(100vh - 11vh);
  padding-top: 0;
  padding-left: 5vh;
  background-color: #ffffff;
}

.menus {
  width: 100%;
  padding-left: 1vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  background-color: #fff;

  .menu-item {
    width: 100%;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    justify-content: start;

    div:nth-child(1) {
      font-size: large;
    }

    div:nth-child(2) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }

    div:nth-child(3) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }

    div:nth-child(4) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }
    div:nth-child(5) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }
    div:nth-child(6) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }
    div:nth-child(7) {
      margin-top: 1vh;
      font-size: small;
      cursor: pointer;
    }

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      span {
        margin-right: 2vh;
        color: gray;
      }
    }
  }

  .menu-item:nth-child(2) {
    margin-top: 2vh;
    padding-bottom: 2vh;
  }
}

.current_page {
  margin: 1vh 3vh;
  color: gray;
}
</style>